import { View, Text, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import timeCount from '../../assets/imgs/timecount.png'
import './TodayStatus.scss'

const TodayStatus = () => {
  const goBack = () => {
    Taro.navigateBack()
  }

  const statusData = [
    { status: '摆烂', time: '2小时' },
    { status: '学习', time: '10分钟' },
    { status: '运动', time: '1小时' }
  ]

  return (
    <View className='TodayStatus'>
      <View className='pageTitle'>
        <Text onClick={goBack} className='goBack'>
          {'<'}
        </Text>
        今日状态统计分析
      </View>

      <View className='statistics'>
        <View>
          <Image className='timeCount' src={timeCount} alt='' />
        </View>
        <View className='analysisTitle'>状态记录详情</View>
        <View className='analysis'>
          <View>
            {statusData.map((item, index) => (
              <View key={index} className='analysis-item'>
                <View className='type'>
                  <View className='circle'></View>
                  <View className='status'>
                    {item.status}
                    <Text className='time'>{item.time}</Text>
                  </View>
                </View>
                <View className='navIcon'> { '>' } </View>
              </View>
            ))}
          </View>
        </View>
      </View>
    </View>
  )
}

export default TodayStatus